<template>
  <!-- 医生-我的用户 -->
  <div class="my-user-box">
    <div class="l-panel">
      <div>
        <el-form :inline="true" class="demo-form-inline" size="small">
          <el-form-item label="姓名">
            <el-input v-model="name" placeholder="患者姓名"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="phone" placeholder="患者电话"></el-input>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              size="small"
              v-model="time"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getMysubscriber()"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <yx-table
        :is-fit="false"
        :table-data="tableData"
        :columns="columns"
        :page-obj="pageObj"
        :loading="loading"
        :tableHeightDefault="500"
      >
        <template slot="patientSex" slot-scope="scope">
          <p>{{ scope.scope.patientSex | sexFilter }}</p>
        </template>
        <template slot="operate" slot-scope="scope">
          <div class="operate-btn">
            <div>
              <el-button
                style="color: #006DB8;"
                size="small"
                type="text"
                @click="checkCase(scope.scope)"
              >
                查看病历
              </el-button>
            </div>
            <div
              v-if="
                scope.scope.inquiryType != 5 && scope.scope.userType != 'YD'
              "
            >
              <el-button
                style="color: #006DB8;"
                size="small"
                type="text"
                @click="sendMes(scope.scope)"
              >
                发送信息
              </el-button>
            </div>
            <div
              v-if="
                scope.scope.inquiryType != 5 && scope.scope.userType != 'YD'
              "
            >
              <el-button
                style="color: #006DB8;"
                size="small"
                type="text"
                @click="checkChatRecord(scope.scope)"
              >
                聊天记录
              </el-button>
            </div>
          </div>
        </template>
      </yx-table>
    </div>
    <!-- 发送消息弹窗 -->
    <el-dialog :title="'发送消息'" :visible.sync="mesVisible">
      <div>
        <el-form :model="messageForm" ref="messageForm" :rules="rules">
          <el-form-item prop="message">
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="messageForm.message"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="send-message-btn" slot="footer">
        <el-button size="small" @click="mesVisible = false">取消</el-button>
        <el-button type="primary" size="small" @click="saveMessage"
          >保存</el-button
        >
      </div>
    </el-dialog>

    <!-- 患者聊天记录 -->
    <!-- <el-dialog
      class="dialog-frame"
      title="聊天记录"
      width="800"
      :visible.sync="chatRecordDialog"
      @close="chatRecordDialog = false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-button type="primary" @click="openVideoRecord">视频记录</el-button>
      <el-table
        class="l-table"
        :data="recordList"
        border
        max-height="480"
        highlight-current-row
      >
        <el-table-column prop="name" label="时间">
          <template slot-scope="scope">
            <span>{{ scope.row.msgDate || "-" }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="size" label="角色">
          <template slot-scope="scope">
            <span>{{ scope.row.msgUserName }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="size" label="内容">
          <template slot-scope="scope">
            <viewer v-if="isUrl(scope.row.msgText)">
              <img :src="scope.row.msgText" width="100" title="点击预览" />
            </viewer>
            <span v-else>{{ scope.row.msgText }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align:center;margin:15px 25px;"
        @current-change="changeRecordListCurrent"
        :current-page="recordPage.current"
        :page-size="recordPage.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="recordPage.total"
        @size-change="handleSizeChange"
        :page-sizes="[10, 20, 50]"
      >
      </el-pagination>
    </el-dialog> -->
    <!-- 患者聊天记录-视频记录 -->
    <!-- <el-dialog
      class="dialog-frame"
      title="视频记录"
      width="800"
      :visible.sync="dialogVideoRecord"
      v-if="dialogVideoRecord"
      @close="dialogVideoRecord = false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div v-for="(v, i) in 4" :key="i">
        <div>2022/04/01</div>
        <video :id="'playerId' + i" class="video-js" controls></video>
      </div>
    </el-dialog> -->
    <chatRecord ref="chatRecordRef"/>
    <!-- 查看病历组件 -->
    <case-history ref="caseHistory"></case-history>
  </div>
</template>

<script>
import yxTable from "../../../components/yxtable/yx-table";
import caseHistory from "@/components/case-history";
import chatRecord from "@/components/chatRecord";
import { isUrl } from "@/utils";
export default {
  components: {
    yxTable,
    caseHistory,
    chatRecord
  },
  data() {
    return {
      viewCaseVisible: false,
      columns: [
        { label: "用户姓名", prop: "patientName" },
        { label: "性别", slot: "patientSex" },
        { label: "年龄", prop: "patientAge" },
        { label: "联系电话", prop: "patientPhone" },
        { label: "咨询时间", prop: "createTime" },
        { label: "证件号码", prop: "patientIdcard" },
        { label: "用户来源", prop: "userSource" },
        { label: "操作", slot: "operate" }
      ], // 操作列
      loading: false,
      pageObj: {
        size: 10,
        total: 0,
        currentPage: 1,
        func: currentPage => {
          this.pageTurning(currentPage);
        },
        handleSizeChange: size => {
          this.sizeChange(size);
        }
      },
      tableData: [],
      name: "",
      phone: "",
      time: [],
      mesVisible: false,
      messageForm: {
        message: ""
      },
      rules: {
        message: [{ required: true, message: "数量不能为空", trigger: "blur" }]
      },
      caseInfo: {},
      idCard: "",
      userId: null,
      chatRecordDialog: false, //聊天记录弹框
      patientMsg: {}, //患者消息列表
      recordPage: {
        //聊天记录分页
        total: 0,
        current: 1,
        size: 10
      },
      recordList: [], //聊天记录列表
      dialogVideoRecord: false
    };
  },
  mounted() {
    this.getMysubscriber();
  },
  methods: {
    isUrl,
    // 发送消息
    sendMes(e) {
      this.userId = e.userId;
      this.mesVisible = true;
    },
    // 查看病历
    checkCase(e) {
      this.$nextTick(() => {
        if (this.$global.platform("lj")) {
          this.$refs.caseHistory.onOpen("his", e);
        } else {
          if (this.$global.isNewCase) {
            this.$refs.caseHistory.onOpen("ca", e);
          } else {
            this.$refs.caseHistory.onOpen("normal", {
              caseInfo: e,
              idCard: e.patientIdcard
            });
          }
        }
      });
    },
    saveMessage() {
      let para = {
        webToken: this.$authInfo.webToken(),
        noticeContent: this.messageForm.message,
        userId: this.userId
      };
      this.$ajax
        .sendNewsMysubscriber(para)
        .then(res => {
          this.mesVisible = false;
          this.$message({
            message: res.msg,
            type: "success"
          });
        })
        .catch(err => {
          this.$message({
            message: err.msg,
            type: "error"
          });
        });
    },
    pageTurning(currentPage) {
      this.pageObj.currentPage = currentPage;
      this.getMysubscriber();
    },
    sizeChange(size) {
      this.pageObj.size = size;
      this.getMysubscriber();
    },
    getMysubscriber() {
      this.loading = true;
      let params = {
        current: this.pageObj.currentPage,
        size: this.pageObj.size,
        name: this.name,
        phone: this.phone
      };

      if (this.time) {
        params.maxTime = this.time[1];
        params.minTime = this.time[0];
      }

      this.$ajax
        .getMysubscriber(params)
        .then(res => {
          this.loading = false;
          let { code, data } = res;
          if (code === 1) {
            this.tableData = data.list;
            this.pageObj.total = data.total;
          }
        })
        .catch(err => {
          this.loading = false;
        });
    },
    handleSizeChange(val) {
      this.recordPage.size = val;
      this.getRecordList();
    },
    checkChatRecord(e) {
      this.patientMsg = e;
    //   this.chatRecordDialog = true;
      this.$refs.chatRecordRef.open(this.patientMsg)
    //   this.getRecordList();
    },
    getRecordList({ page } = {}) {
      // 诊断规范
      page && (this.recordPage.current = page);
      let para = {
        webToken: this.$authInfo.webToken(),
        current: this.recordPage.current,
        size: this.recordPage.size,
        patientId: this.patientMsg.userId,
        userSource: this.patientMsg.userSource
      };
      this.$ajax
        .getChatRecord(para)
        .then(res => {
          this.recordList = res.data.list;
          this.recordPage.total = res.data.total;
          this.recordPage.page = res.data.pages;
        })
        .catch(err => {
          this.$message({
            message: err.msg,
            type: "error"
          });
        });
    },
    changeRecordListCurrent(val) {
      //诊断规范分页
      this.recordPage.current = val;
      this.getRecordList();
    },
    openVideoRecord() {
      this.dialogVideoRecord = true;
    }
  }
};
</script>

<style lang="scss">
.my-user-box {
  .l-panel {
    width: 100%;
    padding: 30px;
  }
}

.send-message-btn {
  text-align: center;
}

.dialog-frame {
  .el-dialog {
    width: 800px !important;
    max-width: 900px !important;
  }
}
</style>
